<template>
  <div class="app-container library">
    <div class="el-flex">
        <div style="padding-right:10px">筛选：</div>
        <div class="el-flex-1">
          <el-radio-group v-model="libraryType" size="small" @change="changeLibrary">
            <el-radio :label="item.id" v-for="item in libraryList" :key="item.id">{{item.name}}</el-radio>
          </el-radio-group>
        </div>
        <div>
          <span style="padding-right:10px">侧边栏开关:</span>
          <el-switch v-model="value1" size="mini"></el-switch>
          <el-button size="small" style="margin-left:15px" @click="dialogVisibleTag=true" type="primary" plain>
            <i class="el-icon-price-tag "></i> 标签管理
          </el-button>
        </div>
      </div>
    <el-card style="margin-top:20px">
      <div class="library_content">
          <Article v-if="libraryType==1"></Article>
          <Other :libraryTypeTxt="libraryTypeTxt" v-else></Other>
      </div>
    </el-card>
    <el-dialog
      title="素材标签管理"
      :visible.sync="dialogVisibleTag"
      width="620px"
      :before-close="handleClose">
      <div>
        <el-tag style="width:100%"><i class="el-icon-message-solid" ></i> 可创建素材标签，通过标签进行素材分类管理 </el-tag>
      </div>
      <div style="padding:20px 0">
         <el-input v-model="tagKeyword" placeholder="请输入要搜索的标签"  prefix-icon="el-icon-search" size="small"> </el-input>
      </div>
      <div class="tagsBox">
         <el-button   color="#fff"  plain size="mini" v-if="!addTag" @click="showInput()"><i class="el-icon-plus" ></i> 添加标签</el-button>
         <el-input
          class="input-new-tag"
          v-if="addTag"
          v-model="newTag"
          ref="saveTagInput"
          size="mini"
          maxlength="6"
          placeholder="输入后回车"
          @keyup.enter.native="handleInputConfirm"
          @blur="handleInputConfirm"
        >
        </el-input>
         <el-tag size="small" closable v-for="(item,index) in tagsArray" style="margin-left:20px" @close="delTag(index)">{{item.name}}</el-tag>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Article from './components/article'
import Other from './components/other'

export default {
  name: 'PagePermission',
  components: { Article ,Other},
  data() {
    return {
      libraryType: '1',
      libraryTypeTxt:'',
      value1: '',
      tagKeyword:'',  //添加标签
      libraryList: [
        { name: '文章', id: '1',type:'article' },
        { name: '链接', id: '2',type:'link' },
        { name: '海报', id: '3',type:'.png、.jpg' },
        { name: '视频', id: '4',type:'.mp4' },
        { name: 'PPT', id: '5',type:'.ppt' },
        { name: 'PDF', id: '6',type:'.pdf' },
        { name: '表格', id: '7',type:'.csv,.xlsx,.xls' },
        { name: '文档', id: '8' ,type:'.doc,.txt'},
      ],
      newTag:'', //新标签内容
      dialogVisibleTag:false,
      tagsArray:[
        {name:'我是你爸爸',id:1},
        {name:'一朵小红花',id:2},
      ],
      addTag:false
    }
  },
  methods: {
    handleRolesChange() {
      this.$router.push({ path: '/permission/index?' + +new Date() })
    },
    addTags(){

    },
    showInput() {
        this.addTag = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
    },
    delTag(e){
       this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.tagsArray.splice(e, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
        
    },
    handleInputConfirm() {
      let newTag = this.newTag;
      if (newTag) {
        let obj={name:newTag}
        this.tagsArray.push(obj);
      }
      this.addTag = false;
      this.newTag = '';
    },
    handleClose(){
      this.dialogVisibleTag=false
    },
    changeLibrary(e){
       console.log(e)
       this.libraryTypeTxt=this.libraryList.find(v=>{return v.id==e})
    }
  }
}
</script>

<style scoped lang="scss">

.library {
  .el-radio{
    margin-right: 15px;
  }
  .library_content{
    min-height: calc(100vh - 220px);
  }
  .el-dialog__body{
    padding: 0px 20px;
  }
  .tagsBox{
    height: 280px;
    // overflow-y: scroll;
  }
  .input-new-tag{
    width: 120px;
  }
}
</style>
